<template>
  <div class="detail">
    <div class="title">
      <span>{{ detail.name }}</span>
      <ul>
        <li>概述</li>
        <li>|</li>
        <li>参数</li>
        <li>|</li>
        <li>用户评价</li>
      </ul>
    </div>
    <div class="goods">
      <div class="swiper-box">
        <swiper :options="swiperOption">
          <swiper-slide v-for="item in sliderList" :key="item.id">
            <img :src="item.img" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="dis">
        <h3>{{ detail.name }}</h3>
        <span
          >相机全新升级 / 960帧超慢动作 / 手持超级夜景 / 全球首款双频GPS /
          骁龙845处理器 / 红<br />外人脸解锁 / AI变焦双摄 / 三星 AMOLED 屏</span
        >
        <div style="color: #ff6600; margin: 10px 0">小米自营</div>
        <div>
          <span style="color: #ff6600">{{ detail.price }}元</span>
          <span
            style="
              text-decoration: line-through;
              color: #ccc;
              margin-left: 12px;
            "
            >1000元</span
          >
        </div>
        <br />
        <hr />
        <div class="address">
          <div style="color: #87878f; margin-left: 14px; display: flex">
            <i></i>
            <span>北京 北京市 朝阳区 安定门街道</span>
          </div>
          <div style="color: #ff6600; margin-left: 30px; margin-top: 8px">
            有现货
          </div>
        </div>
        <div class="banben">
          <div style="margin: 10px; font-weight: bold;">选择版本</div>
          <div class="choosebox">
            <div :class="{ current: current }" @click="choose(0,$event)">
                6GB+64GB 全网通
            </div>
            <div :class="{ current: !current }" @click="choose(1,$event)">
                4GB+64GB 移动4G
            </div>
          </div>
        </div>
        <div class="banben">
          <div style="margin: 10px; font-weight: bold;">选择颜色</div>
          <div class="choosebox">
            <div class="current">
                <span style="width: 12px;height: 12px;display: inline-block;background-color: #666666;"></span>
                <span>深空灰</span>
            </div>
          </div>
        </div>
        <div class="sum">
            <div class="sumbanben">
                <span>{{ '红米Note '+currentName + ' 深空灰' }}</span>
                <span>{{ detail.price }}元</span>
            </div>
            <div style="color: #ff6600;font-size: 18px; font-weight: bold;margin-top: 6px;">总计：999元</div>
        </div>
        <div class="cart">
            加入购物车
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "detail",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
        currentName:'6GB+64GB 全网通',
      current: true,
      detail: {},
      swiperOption: {
        // 设置循环，自动播放
        autoplay: true,
        // 设置循环点击
        loop: true,
        // 设置动画的一些参数
        cubeEffect: {
          slideShadows: false,
          shadow: false,
        },
        // 指定分页器是哪一个
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
      sliderList: [
        {
          id: "1",
          img: require("../assets/imgs/detail/phone-1.jpg"),
        },
        {
          id: "2",
          img: require("../assets/imgs/detail/phone-2.jpg"),
        },
        {
          id: "3",
          img: require("../assets/imgs/detail/phone-3.jpg"),
        },
        {
          id: "4",
          img: require("../assets/imgs/detail/phone-4.jpg"),
        },
      ],
    };
  },
  methods:{
    choose(type,e){
        type?this.current = false:this.current=true
        this.currentName = e.target.innerText
    }
  },
  mounted() {
    this.$axios.get("../../json/product.json").then((res) => {
      console.log(res.data.data);
      this.detail = res.data.data;
    });
  },
};
</script>
<style lang='less'>
.detail {
  margin-top: 50px;
  box-sizing: border-box;
  padding: 0 30px;
  padding-right: 60px;
  .title {
    display: flex;
    position: sticky;
    top: 0;
    background: #fff;
    left: 0;
    height: 60px;
    line-height: 60px;
    z-index: 998;
    justify-content: space-between;
    span {
      font-size: 18px;
      font-weight: bold;
    }
    ul {
      li {
        float: left;
        margin-left: 8px;
        font-size: 14px;
        color: #7a848d;
      }
    }
  }
  .goods {
    display: flex;
    .swiper-box {
      width: 48%;
      .swiper-container {
        box-sizing: border-box;
        padding-left: 55px;
        img {
          width: 76%;
          height: 100%;
        }
      }
    }
    .dis {
      flex-grow: 1;
      .address {
        margin-top: 30px;
        background-color: #fafafa;
        border: 1px solid #ccc;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        i {
          display: inline-block;
          width: 16px;
          height: 18px;
          background: url(../assets/imgs/detail/icon-loc.png) no-repeat;
          background-size: 100% 100%;
          margin-right: 6px;
        }
      }
      .banben{
        .choosebox{
            display: flex;
            justify-content: space-between;
            >div{
                cursor: pointer;
                width: 48%;
                height: 48px;
                line-height: 48px;
                border: 1px solid #f1f1f1;
                text-align: center;
            }
            .current{
                border: 1px solid #ff6600;
                color: #ff6600;
            }
        }
      }
      .sum{
        background: #FAFAFA;
        margin-top: 25px;
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        padding: 12px;
        .sumbanben{
            display: flex;
            color: #333;
            justify-content: space-between;
        }
      }
      .cart{
        background: #ff6600;
        color: #fff;
        width: 300px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        margin: 14px 0;
      }
    }
  }
}
</style>